<template>
	<view class="page">
		<view class="nav_bar nav"
			:style="`background: url(${$util.prefix('auth/store_auth_nav_bg.png')}) 0 0 no-repeat;`">
			<uni-nav-bar color="#333" left-icon="left" title="" :border='false' :fixed="true" title="公会结算设置"
				background-color="transparent" @clickLeft="$util.back()">
			</uni-nav-bar>
		</view>
		
		<view class="nav_box"></view>
		
		<view class="info flex_c">
			<view class="avatar">
				<image :src="logo" mode="aspectFill"></image>
			</view>
			<text>{{ guild_name }}</text>
		</view>
		
		<view class="content">
			<view class="title">主播收益</view>
			
			<view class="input flex_center">
				<view class="label">实时到账</view>
				<view class="right flex_center">
					<input type="text" placeholder="请输入比例" placeholder-class="input-placeholder" v-model="info.anchor_ratio" />
					<text>%</text>
				</view>
			</view>
			
			<view class="input flex_center">
				<view class="label">前2月实时奖励</view>
				<view class="right flex_center">
					<input type="text" placeholder="请输入比例" placeholder-class="input-placeholder" v-model="info.first_month_anchor_ratio" />
					<text>%</text>
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="title">厅主收益</view>
			
			<view class="input flex_center">
				<view class="label">实时到账</view>
				<view class="right flex_center">
					<input type="text" placeholder="请输入比例" placeholder-class="input-placeholder" v-model="info.master_ratio" />
					<text>%</text>
				</view>
			</view>
			
			<view class="input flex_center">
				<view class="label">前2月实时奖励</view>
				<view class="right flex_center">
					<input type="text" placeholder="请输入比例" placeholder-class="input-placeholder" v-model="info.first_month_master_ratio" />
					<text>%</text>
				</view>
			</view>
		</view>
		
		<button 
			:disabled="!info.first_month_anchor_ratio || !info.first_month_master_ratio || !info.master_ratio || !info.anchor_ratio"
			@click="setGuildRatio"
		>确定</button>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					// 公会id
					guild_id: 0,
					// 厅主结算比
					master_ratio: '',
					// 前两个月厅主结算比
					first_month_master_ratio: '',
					// 主播结算比
					anchor_ratio: '',
					// 前两个月主播结算比
					first_month_anchor_ratio: '',

				},
				
				logo: '',
				guild_name: '',
			}
		},
		methods: {
			setGuildRatio(){
				this.$post('/guild/setGuildRatio',this.info).then(res=>{
					this.$util.msg(res.msg);
				});
			},
		},
		
		onLoad(option) {
			if(option.data){
				var data = JSON.parse(option.data);
				this.info.guild_id = data.id;
				this.info.master_ratio = data.master_ratio;
				this.info.first_month_master_ratio = data.first_month_master_ratio;
				this.info.anchor_ratio = data.anchor_ratio;
				this.info.first_month_anchor_ratio = data.first_month_anchor_ratio;
				this.logo = data.logo;
				this.guild_name = data.guild_name;
			}
		}
	}
</script>

<style lang="less" scoped>
	
	.page {
		padding: 56rpx 32rpx 32rpx;
		width: 100vw;
		min-height: 100vh;
		background: #FFFFFF;
	}
	
	.info {
		margin-bottom: 80rpx;
		.avatar {
			width: 176rpx;
			height: 176rpx;
			background: #D8D8D8;
			border-radius: 24rpx;
			overflow: hidden;
			margin-bottom: 30rpx;
			image {
				width: 176rpx;
				height: 176rpx;
			}
		}
		
		text {
			font-weight: 500;
			font-size: 36rpx;
			color: #131313;
			line-height: 50rpx;
		}
	}

	.content {
		padding: 12rpx 0 0 0;
		.title {
			font-weight: 500;
			font-size: 28rpx;
			color: #852EE2;
			margin-bottom: 32rpx;
		}
		.input {
			height: 100rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 0 24rpx;
			margin-bottom: 20rpx;
			
			.label {
				font-weight: 500;
				font-size: 28rpx;
				color: #131313;
				margin-right: 24rpx;
			}
			
			.right {
				flex: 1;
				text {
					font-size: 28rpx;
					color: #666666;
					margin-left: 16rpx;
				}
				
				input {
					flex: 1;
					font-size: 28rpx;
					color: #333;
					text-align: right;
				}
			}
		}
	}

	button {
		width: 560rpx;
		height: 100rpx;
		background: #FD2A53;
		border-radius: 50rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		margin-top: 80rpx;
	}

</style>
